How do you fetch data on a page using load() in SvelteKit?

In SvelteKit, you can fetch data for a page by exporting a load function from a +page.js (or +page.ts) file. The load function runs on the server during SSR and/or in the browser for client-side navigation, and its return value is passed as the data prop to the corresponding +page.svelte.

Example: +page.js with load()

Example: +page.svelte receiving data

If your route is dynamic (e.g., [id]/+page.svelte), the load function receives params containing route parameters.

Example: Dynamic Route with load()

Best practices for load():

Use load to fetch data required for a page before it renders.
Returned values from load are accessible in +page.svelte via the data prop.
load runs on the server during SSR, but also on client-side navigation.
You can access route parameters through params and query parameters via url in load.
For shared data across multiple pages, consider using +layout.js with load.

Question Loading...

How do you fetch data on a page using load() in SvelteKit?

Example: +page.js with load()

Example: +page.svelte receiving data

If your route is dynamic (e.g., [id]/+page.svelte), the load function receives params containing route parameters.

Example: Dynamic Route with load()

Best practices for load():

Use load to fetch data required for a page before it renders.
Returned values from load are accessible in +page.svelte via the data prop.
load runs on the server during SSR, but also on client-side navigation.
You can access route parameters through params and query parameters via url in load.
For shared data across multiple pages, consider using +layout.js with load.